<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 VUI(https://git.oschina.net/durcframework/vui) All rights reserved.
 */

;(function(){

<span id=''>/**
</span> * @ignore
 * @class
 */
VUI.Class('TreeView',{
<span id='-method-constructor'>	/**
</span>	 * 构造函数
	 * @constructor
	 */
	init:function(cmp) {
		this._super(cmp);
		
		this.tplId = 'tree_tpl' + cmp.id;
		this.componentName = 'item_' + cmp.id;
		
		this.initVueComponent(cmp);
		if(this.opt('width')) {
			this.$wraper.width(this.opt('width'));
		}
	}
	,initVueComponent:function(cmp) {
		$('body').append(this.getTpl());
		
		var that = this;
		Vue.component(this.componentName, {
			template: '#'+this.tplId
			,props: {
			    model: Object
			}
			,methods:{
				isOpen:function() {
					return cmp.isOpen(this.model);	
				}
				,isLeaf:function() {
					return cmp.isLeaf(this.model);	
				}
				,isClosed:function() {
					return cmp.isClosed(this.model);	
				}
				,renderer:function() {
					return that.renderer(this.model);
				}
				,vClick:function(e) {
					that.vClick(this.model,e);
				}
				,vSelect:function(e) {
					that.vSelect(e,this.model);
				}
				,vToggle:function() {
					that.vToggle(this.model);
				}
			}
		})
	}
	,vToggle:function(item) {
		if(this.cmp.isLeaf(item)) {
			return;
		}
		
		if(this.cmp.isOpen(item)) {
			this.collapse(item);
		}else{
			this.expand(item);
		}
		
	}
	,expand:function(item) {
		var ret = this.cmp.fire('BeforeExpand',{item:item});
		if(ret === false) {
			return;
		}
		item.state = 'open';
		
		this.cmp.fire('Expand',{item:item});
	}
	,collapse:function(item) {
		var ret = this.cmp.fire('BeforeCollapse',{item:item});
		if(ret === false) {
			return;
		}
		item.state = 'closed';
		
		this.cmp.fire('Collapse',{item:item});
	}
	,vClick:function(item,e) {
		this.cmp.fire('Click',{item:item});
		
		this.doClickToggle(item,e);
	}
	,doClickToggle:function(item,e) {
		var clickToggle = this.opt('clickToggle');
		if(clickToggle) {
			var isToggler = $(e.target).hasClass('pui-tree-toggler')				
			if(isToggler) {
				return;
			}
			if(this.cmp.hasChild(item)) {
				this.vToggle(item);
			}
		}
	}
	,vSelect:function(e,item) {
		this.selectedItem = item;
		var ret = this.cmp.fire('BeforeSelect',{item:item});
		if(ret === false) {
			return;
		}
		
		var $target = $(e.target);
		
		this.activeSelect(item,$target);
		
		this.cmp.fire(&quot;Select&quot;,{item:item});
	}
	,clearSelected:function() {
		var highlightClass = 'ui-state-highlight';
		if(this.beforeSelect) {
			this.beforeSelect.removeClass(highlightClass);
		}
	}
	,activeSelect:function(item,$target) {
		if(this.cmp.hasChild(item) &amp;&amp; this.opt('clickToggle')) {
			return;
		}
		this.clearSelected();
		
		$target.addClass('ui-state-highlight');
		
		this.beforeSelect = $target;
	}
	,renderer:function(data) {
		var hander = this.opt('renderer');
		if(hander) {
			return hander(data);
		}
		return data.text;
	}
	,getTemplate:function() {
		return '&lt;div class=&quot;pui-tree ui-widget ui-widget-content ui-corner-all&quot;&gt;' +
					'&lt;ul class=&quot;pui-tree-container&quot;&gt;'+
						'&lt;'+this.componentName+' v-for=&quot;model in rootData.children&quot; :model=&quot;model&quot;&gt;&lt;/'+this.componentName+'&gt;' +
					'&lt;/ul&gt;'+
				'&lt;/div&gt;';
	}
	,getTpl:function() {
		var tpl = 
		'&lt;script type=&quot;text/x-template&quot; id=&quot;'+this.tplId+'&quot;&gt;' +
  			'&lt;li class=&quot;pui-treenode&quot;&gt;' +
			    '&lt;span @click=&quot;vClick($event)&quot; class=&quot;pui-treenode-content pui-treenode-selectable&quot;&gt;' +
					// toggle
				    '&lt;span v-if=&quot;isLeaf()&quot; class=&quot;pui-treenode-leaf-icon&quot;&gt;&lt;/span&gt; ' + 
					'&lt;span @click=&quot;vToggle()&quot; v-if=&quot;isOpen()&quot; class=&quot;pui-tree-toggler ui-icon ui-icon-triangle-1-s&quot;&gt;&lt;/span&gt; ' + 
					'&lt;span @click=&quot;vToggle()&quot; v-if=&quot;isClosed()&quot; class=&quot;pui-tree-toggler ui-icon ui-icon-triangle-1-e&quot;&gt;&lt;/span&gt; ' + 
				    // icon
				    '&lt;span v-if=&quot;isLeaf()&quot; class=&quot;pui-treenode-icon ui-icon ui-icon-document&quot;&gt;&lt;/span&gt; ' + 
					'&lt;span v-if=&quot;isOpen()&quot; class=&quot;pui-treenode-icon ui-icon ui-icon-folder-open&quot;&gt;&lt;/span&gt; ' + 
					'&lt;span v-if=&quot;isClosed()&quot; class=&quot;pui-treenode-icon ui-icon ui-icon-folder-collapsed&quot;&gt;&lt;/span&gt; ' + 
				    // text
				    '&lt;span ' +
				   	 	'@click=&quot;vSelect($event)&quot; ' +
				    	'class=&quot;pui-treenode-label ui-corner-all&quot;&gt;{{{renderer()}}}&lt;/span&gt;' +
				'&lt;/span&gt;' +
			    '&lt;ul v-show=&quot;isOpen()&quot; class=&quot;pui-treenode-children&quot;&gt;' +
			      '&lt;'+this.componentName+'' +
			       ' v-for=&quot;model in model.children&quot;' +
			       ' :model=&quot;model&quot;&gt;' +
			      '&lt;/'+this.componentName+'&gt;' +
			    '&lt;/ul&gt;' +
			'&lt;/li&gt;' +
		'&lt;/script&gt;';
		
		return tpl;
	}
},VUI.View);

})();</pre>
</body>
</html>
